This walkthrough shows how to bind UXFlow using MVVM pattern.

In this walkthrough, you perform the following tasks:

• Create a ClientUI MVVM Project using Intersoft ClientUI MVVM Application project template.
• Create the Model class that represents the Contact data entity.
• Create the View page that represents the user interface of the application.
• Create the ViewModel class that describes the View.
• Bind the properties of UI controls in the View, such as the ItemsSource property of the UXFlow, to the ViewModel. 

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

Creating a new ClientUI MVVM Application Project

The first step is to create a new ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template in Visual Studio.

To create the ClientUI MVVM Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Application Template.
3. In project reference, add System.Xml.Linq.dll. This assembly is required to perform LINQ query to xml data.

To add the data file

1. In your project, create new folder with name Data.
2. In Data folder, insert the data source from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Data\ContactDataSource.xml.
3. Click on the ContactDataSource.xml file and press F4 to open the Property Window. Change the Build Action property to Resources. 

To add the resources file

1. In your project, create new folder with name Assets.
2. In Assets folder, create new folder with name Images.
3. In Images folder, create new folder with name Photos.
4. In Photos folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Photos\].

Next, you will create the Contact model class that represent the data entity used in this walkthrough.

Creating Model Class

This section shows you how to create the Contact model class that represents the data entity used in this walkthrough. To create the Contact model class, see Walkthrough: Creating Model for Contact Data.

Creating the View

This section steps you through the process of creating a page that uses UXFlow. The UXFlow is used to display a collection of Contact data.

1. Add a new UXPage to the Views folder in your Silverlight project and name it BrowseContacts.xaml. 

   For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010

2. Open the newly created BrowseContacts.xaml page and clear the content inside the LayoutRoot.
3. Create a Grid inside the LayoutRoot.
4. Add UXFlow control to the Grid and set the following properties to the control:
   
   

   Property	Value
   Background	{x:Null}
   BorderBrush	{x:Null}
   MaxHeight	480
   CoverSize	200

   
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid> <Intersoft:UXFlow Name="uXFlow1" Background="{x:Null}" BorderBrush="{x:Null}" MaxHeight="480" CoverSize="200"> </Intersoft:UXFlow> </Grid> </Grid>

   
   
   
   

Creating the ViewModel

This section steps you through the process of creating a ViewModel class that contains the properties to describe the View that you created in the previous section.

1. Add a new class to the ViewModels folder in your Silverlight project and name it BrowseContactsViewModel.cs.
2. Open BrowseContactsViewModel.cs and inherit the class from ViewModelBase class.
   

   C#	Copy Code
   public class BrowseContactsViewModel : ViewModelBase { }

3. In this view model, you add the LoadData method to get the data from ContactDataSource.xml and stored in ContactsData property.
   

   C#

   Copy Code

   // Views public ObservableCollection<Contact> ContactsData { get; set; } public BrowseContactsViewModel() { this.LoadContacts(); } private void LoadContacts() { // loads contact data from xml file StreamResourceInfo resource = System.Windows.Application.GetResourceStream( new Uri("UXListBoxMVVM;component/Data/ContactDataSource.xml", UriKind.Relative)); XDocument doc = XDocument.Load(resource.Stream); var contacts = from x in doc.Descendants("Customer") select new Contact(x); this.ContactsData = new ObservableCollection<Contact>(); foreach (Contact contact in contacts) { contact.SetPhoto(this.ContactsData.Count.ToString()); this.ContactsData.Add(contact); } resource.Stream.Close(); }

Binding the View to the ViewModel

In the previous sections, you have learned how to create the Model and ViewModel classes, as well as the View that contains the user interface and controls used in this walkthrough. This section shows how to instantiate the ViewModel in the XAML page and bind the UI elements to the properties in the ViewModel.

To bind the BrowseContacts View to the BrowseContactsViewModel class

1. Declare the namespace that maps to the BrowseContactsViewModel class in the BrowseContacts page.
   

   XAML	Copy Code
   <Intersoft:UXPage ... xmlns:ViewModels="clr-namespace:UXFlowMVVM.ViewModels" ...>

2. Instantiate a new instance of the BrowseContactsViewModel class in the UXPage resources and name it ContactsData.
   

   XAML	Copy Code
   <Intersoft:UXPage ... > <Intersoft:UXPage.Resources> <ViewModels:BrowseContactsViewModel x:Key="ContactsData" /> </Intersoft:UXPage.Resources> ... </Intersoft:UXPage>

3. Bind the DataContext property of the Grid that contains UXFlow to the ContactsData through the static resource extension markup.

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid DataContext="{Binding Source={StaticResource ContactsData}}"> <Intersoft:UXFlow ... > </Intersoft:UXFlow> </Grid> </Grid>

4. Bind ItemsSource property of the UXFlow to the ContactsData property that existed in the BrowseContactsViewModel.

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid ... > <Intersoft:UXFlow ... ItemsSource="{Binding Path=ContactsData}"> </Intersoft:UXFlow> </Grid> </Grid>

5. Create a DataTemplate to define the item template for the UXFlow. Add the necessary controls such as Intersoft DockPanel, Image, StackPanel and TextBlock that represents the user interface to display the Contact information, and bind these controls to the BrowseContactsViewModel through the provided properties, such as shown in the following code.

   XAML

   Copy Code

   <Intersoft:UXPage.Resources> ... <DataTemplate x:Key="ContactTemplate"> <Border Width="200" CornerRadius="8" Background="#7FEBEBEB"> <Border.Effect> <DropShadowEffect ShadowDepth="0" BlurRadius="8"/> </Border.Effect> <Grid> <Intersoft:DockPanel Margin="6"> <Image Source="{Binding Photo}" Height="90"/> <StackPanel Orientation="Vertical" Margin="10,20"> <TextBlock Text="{Binding Address}" FontSize="6" Margin="0,0,0,6"/> <TextBlock Text="{Binding Email}" FontSize="6"/> <TextBlock Text="{Binding Twitter}" FontSize="6"/> </StackPanel> </Intersoft:DockPanel> <TextBlock Foreground="White" Text="{Binding Name}" Margin="4" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="20"/> </Grid> </Border> </DataTemplate> </Intersoft:UXPage.Resources>

6. Set the  ItemTemplate of the UXFlow to the data template that created in the previous step.
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid ... > <Intersoft:UXFlow ... ItemTemplate="{StaticResource ContactTemplate}"> </Intersoft:UXFlow> </Grid> </Grid>

7. Finally, save and run the project
   

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM project using Intersoft ClientUI MVVM Application project template, and create the classes and page based on the Model, View and ViewModel pattern. You also learned how to bind UXFlow to a collection of data and using ItemTemplate to customize the data displayed.

To learn more about UI development using MVVM pattern, see MVVM Pattern Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Contact.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using UXFlowMVVM.ViewModels;
using System.Xml.Linq;
using System.Text.RegularExpressions;

namespace UXFlowMVVM.Models
{
    public class Contact : ModelBase
    {
        #region Constructors

        public Contact()
        {
        }

        public Contact(XElement x)
            : this()
        {
            this._id = x.Element("Id").Value.Trim();
            this._name = x.Element("Name").Value.Trim();
            this._email = x.Element("Email").Value.Trim();

            this._address = x.Element("Address").Value.Trim();
            this._twitter = x.Element("Twitter").Value.Trim();
        }

        #endregion

        #region Fields

        private string _name = string.Empty;
        private string _address = string.Empty;
        private string _id = string.Empty;
        private string _email = string.Empty;
        private string _twitter = string.Empty;
        private Uri _photo = null;

        #endregion

        #region Properties

        public string Name
        {
            get
            {
                return this._name;
            }

            set
            {
                if (this._name != value)
                {
                    this._name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }

        public string Address
        {
            get
            {
                return this._address;
            }

            set
            {
                if (this._address != value)
                {
                    this._address = value;
                    this.OnPropertyChanged("Address");
                }
            }
        }

        public string Id
        {
            get
            {
                return this._id;
            }

            set
            {
                if (this._id != value)
                {
                    this._id = value;
                    this.OnPropertyChanged("Id");
                }
            }
        }

        public string Email
        {
            get
            {
                return this._email;
            }

            set
            {
                if (this._email != value)
                {
                    this._email = value;
                    this.OnPropertyChanged("Email");
                }
            }
        }

        public string Twitter
        {
            get
            {
                return this._twitter;
            }

            set
            {
                if (this._twitter != value)
                {
                    this._twitter = value;
                    this.OnPropertyChanged("Twitter");
                }
            }
        }

        public Uri Photo
        {
            get
            {
                return this._photo;
            }

            set
            {
                if (this._photo != value)
                {
                    this._photo = value;
                    this.OnPropertyChanged("Photo");
                }
            }

        }

        #endregion

        #region Methods

        public void SetPhoto(string uri)
        {
            this.Photo = new Uri("/UXFlowMVVM;component/Images/Photos/" + uri + ".jpg", UriKind.RelativeOrAbsolute);
        }

        public void SetPhoto(Uri uri)
        {
            this.Photo = uri;
        }

        #endregion
    }
}

BrowseContactsViewModel.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Intersoft.Client.Framework.Input;
using System.Collections.ObjectModel;
using UXFlowMVVM.Models;
using System.Windows.Resources;
using System.Xml.Linq;
using System.Linq;

namespace UXFlowMVVM.ViewModels
{
    public class BrowseContactsViewModel : ViewModelBase
    {
        // Views
        public ObservableCollection<Contact> ContactsData { get; set; }

        public BrowseContactsViewModel()
        {
            this.LoadContacts();
        }

        private void LoadContacts()
        {
            // loads contact data from xml file
            StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                    new Uri("UXFlowMVVM;component/Data/ContactDataSource.xml", UriKind.Relative));

            XDocument doc = XDocument.Load(resource.Stream);

            var contacts = from x in doc.Descendants("Customer")
                           select new Contact(x);

            this.ContactsData = new ObservableCollection<Contact>();

            foreach (Contact contact in contacts)
            {
                contact.SetPhoto(this.ContactsData.Count.ToString());

                this.ContactsData.Add(contact);
            }

            resource.Stream.Close();
        }
    }
}

BrowseContacts.XAML

<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    xmlns:ViewModels="clr-namespace:UXFlowMVVM.ViewModels"
        mc:Ignorable="d"
        x:Class="UXFlowMVVM.Views.BrowseContacts" 
        Title="BrowseContacts Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <Intersoft:UXPage.Resources>
        <ViewModels:BrowseContactsViewModel x:Key="ContactsData"/>
        <DataTemplate x:Key="ContactTemplate">
            <Border Width="200" CornerRadius="8" Background="#7FEBEBEB">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="8"/>
                </Border.Effect>
                <Grid>
                    <Intersoft:DockPanel Margin="6">
                        <Image Source="{Binding Photo}" Height="90"/>
                        <StackPanel Orientation="Vertical" Margin="10,20">
                            <TextBlock Text="{Binding Address}" FontSize="6" Margin="0,0,0,6"/>
                            <TextBlock Text="{Binding Email}" FontSize="6"/>
                            <TextBlock Text="{Binding Twitter}" FontSize="6"/>
                        </StackPanel>
                    </Intersoft:DockPanel>
                    <TextBlock Foreground="White" Text="{Binding Name}" Margin="4" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="20"/>
                </Grid>
            </Border>
        </DataTemplate>
    </Intersoft:UXPage.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid DataContext="{Binding Source={StaticResource ContactsData}}">
            <Intersoft:UXFlow Name="uXFlow1" Background="{x:Null}" BorderBrush="{x:Null}" MaxHeight="480" CoverSize="200" ItemsSource="{Binding Path=ContactsData}" ItemTemplate="{StaticResource ContactTemplate}">

            </Intersoft:UXFlow>
        </Grid>
    </Grid>
</Intersoft:UXPage>